<template>
    <infoBaseComponents :title="string">
        <el-collapse>
            <el-collapse-item :title=title[0] name="1">
                <el-table :data="news" style="width: 100%" border>
                    <el-table-column label="封面" width="250">
                        <template #default="scope">
                            <el-image style="width: auto; height: 150px" :src="scope.row.face" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="400" />
                    <el-table-column prop="author" label="作者" width="200" />
                    <el-table-column label="发布时间" width="200">
                        <template #default="scope">
                            {{ scope.row.time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="文章管理" width="163">
                        <template #default="scope">
                            <el-button type="primary" @click="start(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item :title=title[1] name="2">
                <el-table :data="activity" style="width: 100%" border>
                    <el-table-column label="封面" width="250">
                        <template #default="scope">
                            <el-image style="width: auto; height: 150px" :src="scope.row.face" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="400" />
                    <el-table-column prop="author" label="作者" width="200" />
                    <el-table-column label="发布时间" width="200">
                        <template #default="scope">
                            {{ scope.row.time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="角色管理" width="163">
                        <template #default="scope">
                            <el-button type="primary" @click="start(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item :title=title[2] name="3">
                <el-table :data="scenery" style="width: 100%" border>
                    <el-table-column label="封面" width="250">
                        <template #default="scope">
                            <el-image style="width: auto; height: 150px" :src="scope.row.face" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="400" />
                    <el-table-column prop="author" label="作者" width="200" />
                    <el-table-column label="发布时间" width="200">
                        <template #default="scope">
                            {{ scope.row.time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="角色管理" width="163">
                        <template #default="scope">
                            <el-button type="primary" @click="start(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item :title=title[3] name="4">
                <el-table :data="story" style="width: 100%" border>
                    <el-table-column label="封面" width="250">
                        <template #default="scope">
                            <el-image style="width: auto; height: 150px" :src="scope.row.face" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="400" />
                    <el-table-column prop="author" label="作者" width="200" />
                    <el-table-column label="发布时间" width="200">
                        <template #default="scope">
                            {{ scope.row.time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="角色管理" width="163">
                        <template #default="scope">
                            <el-button type="primary" @click="start(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item :title=title[4] name="5">
                <el-table :data="culture" style="width: 100%" border>
                    <el-table-column label="封面" width="250">
                        <template #default="scope">
                            <el-image style="width: auto; height: 150px" :src="scope.row.face" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="400" />
                    <el-table-column prop="author" label="作者" width="200" />
                    <el-table-column label="发布时间" width="200">
                        <template #default="scope">
                            {{ scope.row.time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="角色管理" width="163">
                        <template #default="scope">
                            <el-button type="primary" @click="start(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
            <el-collapse-item :title=title[5] name="6">
                <el-table :data="history" style="width: 100%" border>
                    <el-table-column label="封面" width="250">
                        <template #default="scope">
                            <el-image style="width: auto; height: 150px" :src="scope.row.face" :fit="fit" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题" width="400" />
                    <el-table-column prop="author" label="作者" width="200" />
                    <el-table-column label="发布时间" width="200">
                        <template #default="scope">
                            {{ scope.row.time.slice(0, 16) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="角色管理" width="163">
                        <template #default="scope">
                            <el-button type="primary" @click="start(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
    </infoBaseComponents>

    <el-dialog v-model="dialogVisible" title="首页管理" width="50%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div v-if="dialogVisible">
            <div class="mt-4">
                <el-input v-model="keyword" placeholder="请输入文章标题" class="input-with-select">
                    <template #append>
                        <div @click="search()" style="cursor: pointer;width: 100%;height: 100%;">
                            搜索
                        </div>
                    </template>
                </el-input>
            </div>
            <el-radio-group v-model="aid" class="ml-4">
                <div v-for="i in answer" :key="i.id">
                    <div>
                        <el-radio :label="i.id" size="large">
                            {{ i.title }}<br>
                        </el-radio>
                    </div>
                </div>
            </el-radio-group>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, save()">
                    保存
                </el-button>
                <el-button @click="dialogVisible = false, getInfo()">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import infoBaseComponents from '@/components/background/global/home/infoBaseComponents.vue';
import { ref, watch } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
export default {
    name: "homeSettingView",

    components: {
        infoBaseComponents,
    },
    setup() {
        let dialogVisible = ref(false);
        const store = useStore();

        let aid = ref('');
        let keyword = ref("");
        let answer = ref([]);
        let string = ref('首页修改');
        let title = ref(["新闻资讯", '精彩活动', '红色景点', '人物故事', '红色文化', '红色历史']);

        let news = ref([]);
        let activity = ref([]);
        let scenery = ref([]);
        let story = ref([]);
        let culture = ref([]);
        let history = ref([]);

        let getInfo = () => {
            for (let i = 0; i < title.value.length; i++) {
                $.ajax({
                    type: "post",
                    url: "http://124.221.73.180:3001/homeArticle/getShowHomeByTag/",
                    headers: {
                        "satoken": store.state.admin.token,
                    },
                    data: {
                        tag: title.value[i],
                    },
                    success(resp) {
                        switch (i) {
                            case 0: news.value = resp.article; break;
                            case 1: activity.value = resp.article; break;
                            case 2: scenery.value = resp.article; break;
                            case 3: story.value = resp.article; break;
                            case 4: culture.value = resp.article; break;
                            case 5: history.value = resp.article; break;
                        }
                        console.log(resp);
                    }
                });
            }
        }
        getInfo();
        let prop = ref();
        let start = (i) => {
            prop.value = i;
            dialogVisible.value = true;
            console.log(i);
        }
        let search = () => {
            if (keyword.value != "") {
                $.ajax({
                    type: "post",
                    url: "http://124.221.73.180:3001/article/search/",
                    headers: {
                        "satoken": store.state.admin.token,
                    },
                    data: {
                        keyword: keyword.value,
                        page: 1,
                        sizes: 100,
                    },
                    success(resp) {
                        answer.value = resp.article;
                        console.log(resp);
                    }
                });
            }
        }
        watch(dialogVisible, () => {
            answer.value = [];
            keyword.value = "";
        })
        let save = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/homeArticle/updataShowHome/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    id: prop.value.hid,
                    aid: aid.value,
                },
                success(resp) {
                    console.log(resp);
                    getInfo();
                }
            });
        }
        return {
            start,
            getInfo,
            search,
            save,


            string,
            aid,
            answer,
            keyword,
            dialogVisible,
            news,
            activity,
            scenery,
            culture,
            history,
            story,
            title,
        }
    }

}

</script>

<style scoped>
.el-radio-group {
    display: inline;
}

.el-radio.el-radio--large .el-radio__label {
    font-size: 14px;
    width: 45vw;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>